<script setup>
import TemplateSyntaxDemo from "@/components/TemplateSyntaxDemo.vue";
import AttrBindingDemo from "@/components/AttrBindingDemo.vue";
import IfDemo from "@/components/ifDemo.vue";
import ListDemo from "@/components/ListDemo.vue";
import KeyDemo from "./components/KeyDemo.vue"
import EventDemo1 from "@/components/EventDemo1.vue";
import EventDemo2 from "@/components/EventDemo2.vue";
import EventDemo3 from "@/components/EventDemo3.vue";
import ArrayMonitor from "@/components/ArrayMonitor.vue";
import ComputeDemo from "@/components/ComputeDemo.vue";
import InputDemo from "@/components/InputDemo.vue";

</script>

<template>
  <!-- 6.模板语法 -->
  <TemplateSyntaxDemo></TemplateSyntaxDemo>
  <!-- 7.属性绑定 -->
  <AttrBindingDemo></AttrBindingDemo>
  <!-- 8.条件渲染 -->
  <IfDemo></IfDemo>
  <!-- 9.列表渲染 -->
  <ListDemo></ListDemo>
  <!-- 10.通过key管理状态 -->
  <KeyDemo></KeyDemo>
  <!-- 11.事件处理 -->
  <EventDemo1></EventDemo1>
  <EventDemo2></EventDemo2>
  <EventDemo3></EventDemo3>
  <!-- 14.数组变化侦测:数组的修改和合并等 -->
  <ArrayMonitor></ArrayMonitor>
  <!-- 15.计算属性 -->
  <ComputeDemo></ComputeDemo>
  <!-- 16.class绑定 :class -->
  <!-- 17.style绑定 类似class绑定 :style -->
  <!-- 18.侦听器 监听页面的变化 watch:{}-->
  <!-- 19.表单输入绑定 v-model -->
  <InputDemo></InputDemo>
  <!-- 20.模板引用（直接获取/操作DOM）标签加ref属性，使用时用this.$refs.xxx获取 -->
  <!-- 21.组件组成 1.写组件 2.import引入组件 3.注入组件components:{} 4.显示组件-->
  <!-- 22.组件嵌套关系 -->
  <!-- 23.组件的注册方式 全局注册（在main.js中注册），局部注册（在组件中注册），不推荐全局注册 -->
  <!-- 24.组件传递数据 父级定义title="xxx" 子级用props:[“title”]取,先要传递动态数据用 :title=“xxx”。注意：props传递数据只能从父级传递到子级，不能反其道而行 -->
  <!-- 25.组件传递多种数据类型 props 可以传递任何数据类型:字符串、数字、数组、对象 -->
  <!-- 26.组件传递Props校验 props:{title:{type:String}} 字符串和数字可以设置默认值default 其他类型需要用工厂方式创建 default(){return ["空"]}  props传递的数据只读！  关键字：type/default/required等 -->
  <!-- 27.组件事件（自定义事件）：组件之间传递数据 可以实现子传父。子级函数中写this.$emit("xxx"，“参数”),父级可直接取@xxx=父级函数 触发函数。注意：组件之间传递数据方案有两种：1.父传子 props 2.子传父用【组件事件】this.$emit() -->
  <!-- 28.组件事件配合v-model使用 自定义事件+v-model+侦听器watch 三者实现 -->
  <!-- 29.组件数据传递 通过函数的形式实现props的子传父场景 -->
  <!-- 30.透传Attributes 传递class使用  注意：1.必须是唯一根元素 2.禁用透传 inheritAttrs:false-->
  <!-- 31.插槽Slot：传递DOM。 让子组件渲染 <slot></slot>元素是一个插槽出口，表示了父元素提供的插槽内容将在哪里被渲染-->
  <!-- 32.插槽Slot 1.渲染作用域：插槽内容可以访问到父组件的数据作用域，因为插槽内容本身就是在父组件中定义 2.在子组件slot组件中写默认值 3.具名插槽 <template v-slot="xxx"> 子组件用<slot #xxx></slot> -->
  <!-- 33.插槽Slot：插槽中的数据传递，将子级的参数传给父级 父级统一处理。具名插槽也支持数据传递 -->
  <!-- 34.组件的生命周期：钩子函数8个：创建前后create+渲染前后mount+更新前后update+销毁前后unmount-->
  <!-- 35.生命周期的应用 最好在渲染结束后请求网络数据-->
  <!-- 36.动态组件 <component :is="组件名">标签承载组件</> 通过函数来修改组件-->
  <!-- 37.组件保持存活 <component :is="组件名"> 更换组件后老组件被卸载。通过<keep-alive>包裹则可以保活不卸载 -->
  <!-- 38.异步组件 异步加载需要的组件，防止一下加载太多组件耗时影响用户体验 -->
  <!-- 39.依赖注入:跨组件透传，不用一代一代传递数据，直接传给子孙后代   provide+inject  注意：只能由上到下传递-->
  <!-- 40.Vue应用 -->
<br>
<div style="height: 500px"></div>
</template>

<style scoped>

</style>

